<template>
  <div class="page" style="">
    <div class="print_title">封闭生产申请单详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.closePdtBillNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposer_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposerTime }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <p class="title" style="margin-top: 24px;">封闭信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">项目名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectName }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">项目编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectNo }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">经营团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamName_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">业务名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.categoryName }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">任务编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">实施部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.executeDepart_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">生产团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.productTeam_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">项目负责人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectLeading_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">封闭开始时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.closeStartDate }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">封闭结束时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.closeEndDate }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">封闭人员:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.closeUserNames_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">申请原因:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.closeApplyReason }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">预期成果:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.expectResult }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" title="附件信息" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import address from '@/components/AddressChoice/address.js'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
export default {
  props: {
    formData: {
      type: Object,
      default: () => { },
      required: true
    },
    formDataHistory: {
      type: Object,
      default: () => { },
      required: true
    }
  },
  components: {
    FileInfor,
    ProcessInfor
  },
  data() {
    return {
      address,
      filterMultiDictText,
      dictOptions: {},
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 45,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '业务分类编码',
          width: 90,
          align: 'center',
          dataIndex: 'categoryCode'
        },
        {
          title: '业务分类名称',
          width: 90,
          align: 'center',
          dataIndex: 'categoryName'
        },
        {
          title: '合同占比(%)',
          width: 65,
          align: 'center',
          dataIndex: 'contractRate'
        },
        {
          title: '分配合同额(元)',
          width: 80,
          align: 'center',
          dataIndex: 'contractAmount'
        },
        {
          title: '生产团队',
          align: 'center',
          dataIndex: 'productTeam',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['productTeam'], text + '')
            }
          }
        },
        {
          title: '团队负责人',
          align: 'center',
          width: 80,
          dataIndex: 'teamLeader',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['teamLeader'], text + '')
            }
          }
        },
        {
          title: '任务说明',
          align: 'center',
          dataIndex: 'taskDescription'
        }
      ],
      dataHistorySource: [], // 流程列表
      url: {
        historyList: '/api/erpmng/act/task/processHistoryList' // 流程历史跟踪接口
      },
      purchaseFile: [] // 附件
    };
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          // this.list()
          this.getHistoryList()
          this.initDictConfig() // 字典值
          if (val.attachmentFile) {
            this.purchaseFile = val.attachmentFile.split(',')
          }
        }
      },
      immediate: true,
      deep: true
    },
    formDataHistory: {
      handler(val) {
        if (val) {
          this.getHistoryList()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取列表
    getHistoryList() {
      var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
      getAction(this.url.historyList, params).then(res => {
        if (res.success) {
          this.dataHistorySource = res.result.records || res.result
        }
      })
    },

    initDictConfig() {
      initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'productTeam', res.result)
        }
      })
      initDictOptions('erp_employee_file,name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'teamLeader', res.result)
        }
      })
    },

    tableRowClass(record, index) {
      if (index == 0) {
        return 'rowClass';
      }
      return ''
    },

    getAddress(text) {
      if (!text) {
        return false
      }
      var areaList = text.split(',')
      var areaText = ''
      this.address.map(value => {
        if (areaList[0] && areaList[0] == value.code) {
          areaText = areaText + value.name + '/'
          if (value && value.children && value.children.length) {
            value.children.map(val => {
              if (areaList[1] && areaList[1] == val.code) {
                areaText = areaText + val.name + '/'

                if (val && val.children && val.children.length) {
                  val.children.map(va => {
                    if (areaList[2] && areaList[2] == va.code) {
                      areaText = areaText + va.name
                    }
                  })
                }
              }
            })
          }
        }
      })
      return areaText
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  background: #ffffff;
  padding: 19px 28px 0 28px;
  width: 750px;

  .print_title {
    font-size: 15px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
  }

  .title {
    background: #EEEEEE;
    font-size: 13px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
    padding: 11px 9px;
  }

  .title_table {
    font-size: 13px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
  }
}

/deep/ .rowClass {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-thead th {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-thead tr {
  background: #EEEEEE;
}

/deep/ .ant-table-small>.ant-table-content>.ant-table-body {
  margin: 0 0px;
}

/deep/ .ant-table-body tr {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-body tr td {
  word-wrap: break-word;
  word-break: break-all;
}

.content {
  font-size: 13px;
}</style>
